<template>
	<view class=" page_wrap" style="height: 100vh;">

		<view class="info_wrap z-flex z-row-between z-col-center">
			<view class="info_left">
				我的购物车有{{totalNum}}件宝贝
			</view>
		</view>
		<view class="card_wrap">
			<uv-checkbox-group v-model="checkboxValue" shape="circle">


				<view class="card_item" v-for="(item,idx) in cartList" :key="idx" @click="toClick(idx)">
					<view class="card_top_wrap">
						<view class="card_top">
							<view class="card_title z-flex z-col-center">
								{{item.courseDO.courseName}}
							</view>
							<view class="card_pro_title">
								<view v-if="item.courseDO.courseAddress" class="title_item_wrap">{{item.courseAddress}}
								</view>
								<view class="title_item_wrap">
									{{item.courseDO.courseStartDate}}-{{item.courseDO.courseEndDate}}&nbsp;·&nbsp;{{item.courseDO.courseTime}}{{item.courseDO.courseStartTime}}-{{item.courseDO.courseEndTime}}
								</view>
								<view class="title_item_wrap">
									授课：{{item.courseDO.teacher}}
								</view>
								<view class="title_item_wrap">
									课程共15讲 · 仅购买7讲剩余讲义
								</view>
							</view>

						</view>
					</view>
					<view class="card_bottom z-flex">
						<view class="bottom_left z-flex z-col-center">
							<view class="">
								<uv-checkbox label=" " :ref="'checkbox'+idx" @click.prevent
									:name="item.prodId"></uv-checkbox>
							</view>
							<view class="" style="margin-left: 10rpx;">
								<view class="bottom_left_season">
									{{item.courseDO.semester}}
								</view>
								<view class="bottom_left_time">
									2023.10.26-2023.12.28
								</view>
							</view>
						</view>
						<view class="bottom_right z-flex z-col-bottom">
							<text style="display: flex;font-size: 28rpx;line-height: 44rpx;">￥</text>
							<text>
								{{item.courseDO.coursePrice}}
							</text>
						</view>
					</view>
				</view>

			</uv-checkbox-group>
		</view>
		<view class="_footer">

		</view>
		<view class="bottom_wrap z-flex-col z-row-center">
			<view class="bottom_item z-flex z-row-between z-col-center">
				<view class="icon_wrap z-flex z-col-center">
					<!-- 	<view :class="'check_item '+(checkedAll?' checked ':' ') " style="margin-right: 0;">

					</view> -->
					<!-- <view class="u-m-l-8 u-m-r-44 quanxuan">
						全选
					</view> -->
					<view class="total_ z-flex z-col-center">
						<view class="u-m-r-16">
							合计
						</view>
						<view class="total_price">
							¥{{totalPrice}}
						</view>
					</view>
				</view>

				<view class="button_wrap">
					<view class="button_item z-flex z-row-center ">
						<MyButton type='warning' size="normal" text="结算" :loading="buttonLoading" @click="toPayment"></MyButton>
					</view>
				</view>
			</view>
		</view>
		<!-- <u-modal :show="show" title="提示" :content='content' :showCancelButton="true" @confirm="toDelete"
			@cancel="show=false"></u-modal> -->
	</view>

</template>

<script>
	import {
		setCartList
	} from "@/utils/storage.js"
	import {
		add,
		multiply
	} from "@/utils/mathUtils.js"
	import paymentMixin from "@/pages/payment/payment-mixin.js"
	export default {
		mixins: [paymentMixin],
		data() {
			return {
				checkedAll: false,
				cartList: [],
				show: false,
				content: '该操作将会修改购课单，是否继续',
				index: 0,
				idx: 0,
				checkboxValue: [],
				buttonLoading:false,
			}
		},
		onLoad() {
			let cartList = getApp().globalData.cartList
			this.cartList = cartList.map(item => {
				this.$set(item, 'checked', false)
				return item
			})
		},
		computed: {
			totalPrice() {
				let sum = 0
				this.cartList.map(item => {

					if (item.checked) {
						sum = add(sum, multiply(item.prodCount, item.courseDO.coursePrice))
					}
				})
				return sum
			},
			totalNum() {
				return this.cartList.length
			}
		},
		methods: {
			toPayment() {

				if (this.checkboxValue.length == 0) {
					this.$toast.tip("请选择购买的课程")
					return
				}
				let cartList = []
				this.checkboxValue.map(val => {
					this.cartList.map(item => {
						if (item.prodId == val) {
							cartList.push(item)
						}
					})
				})
				this.buttonLoading = true
				this.startPayment({
					params: {
						orderItems: cartList,
						complete:()=>{
							this.buttonLoading = false
						}
					}
				})
			},

			toClick(idx) {
				this.$refs['checkbox' + idx][0].iconClickHandler()
			},

			toDelete() {
				this.cartList[this.index].goodslist.splice(this.idx, 1)
				if (this.cartList[this.index].goodslist.length == 0) {
					this.cartList.splice(this.index, 1)
				}
				getApp().globalData.cartList = this.cartList
				setGoodsCart(this.cartList)
				this.show = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page_wrap {
		height: 100vh;
		overflow: auto;
		background: #F0F0F0;
	}

	.info_wrap {
		padding: 26rpx 50rpx;

		.info_left {
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			color: #666666;
			line-height: 40rpx;
		}

		.info_right {
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: pink;
			line-height: 40rpx;
		}
	}

	._footer {
		height: 220rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

	}

	.bottom_wrap {
		.bottom_item {
			width: 100%;
		}

		z-index: 10;
		background: #fff;
		width: 100%;
		bottom: 0;
		position: fixed;
		height: 124rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		box-sizing: content-box;
	}

	.icon_wrap {
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 600;
		color: #474747;
		line-height: 36rpx;
		padding-left: 40rpx;

		.total_ {
			font-size: 26rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 500;
			color: #474747;
			line-height: 36rpx;
		}
	}

	.quanxuan {
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #474747;
		line-height: 36rpx;
	}

	.button_wrap {
		margin-right: 46rpx;

		.button_item {
			width: 100%;
			font-size: 32rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			color: #FFFFFF;
			line-height: 86rpx;

			&_left {
				width: 192rpx;
				height: 86rpx;
				background: #222222;
				border-top-left-radius: 48rpx;
				border-bottom-left-radius: 48rpx;
			}

			&_right {
				width: 192rpx;
				height: 86rpx;
				background: #2EB156;
				border-top-right-radius: 48rpx;
				border-bottom-right-radius: 48rpx;
			}
		}
	}

	.component_item {
		width: 100%;
		height: 100%;
		background-color: #fff;
		box-sizing: border-box;
		padding: 12rpx 20rpx;
	}

	.check_item {
		width: 36rpx;
		height: 36rpx;
		// background-image: url('/static/images/components/1.png');
		background-repeat: no-repeat;
		background-size: 100%;
		background-position: center;
		margin-right: 30rpx;

		border: 2rpx solid pink;
		border-radius: 50%;
		position: relative;
	}

	.checked {
		background-color: pink;
	}

	.disabled {
		background: #f4f0f0;
		border-color: #b2b5b4;
	}

	.content {
		._name {
			font-size: 30rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 600;
			color: #474747;
			line-height: 42rpx;
		}

		._tip_wrap {
			.tip_item {
				font-size: 26rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #9E9E9E;
				line-height: 36rpx;
			}
		}

		._bottom {
			.price {
				font-size: 30rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 600;
				color: #474747;
				line-height: 42rpx;
			}
		}
	}

	::v-deep .u-number-box__input {
		border: none !important;

	}

	.component_title_wrap {
		margin-bottom: 20rpx;
		padding-left: 20rpx;
		background: #fff;

		.component_title_item {
			font-size: 30rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 42rpx;
		}
	}

	.card_wrap {
		padding: 30rpx;

		.card_item {
			background: #FFFFFF;
			box-shadow: 6rpx 14rpx 26rpx 0rpx rgba(184, 184, 184, 0.2), -6rpx 0rpx 26rpx 0rpx rgba(184, 184, 184, 0.2);
			border-radius: 16rpx;
			// height: 402rpx;
			// padding: 40rpx;
			margin-bottom: 30rpx;

			.card_top_wrap {
				padding: 40rpx 40rpx 0rpx 80rpx;
			}

			.card_top {
				padding-bottom: 20rpx;
				border-bottom: 4rpx solid #EAEAEA;
			}

			.card_bottom {
				padding: 30rpx 40rpx 30rpx 26rpx;
				justify-content: space-between;
			}

			.bottom_left {
				.bottom_left_season {
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height: 35rpx;
				}

				.bottom_left_time {
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 500;
					color: #aaa;
					line-height: 35rpx;
				}
			}

			.bottom_right {
				color: #F02015;
				font-size: 36rpx;
				font-weight: 600;
				font-family: PingFang SC-Regular, PingFang SC;
			}

			.card_title {
				font-size: 32rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 600;
				color: #333333;
				line-height: 42rpx;
			}

			.title_item_wrap {
				margin-bottom: 10rpx;
			}

			.card_pro_title {
				font-size: 26rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 500;
				color: #aaa;
				line-height: 35rpx;
				margin-top: 20rpx;

			}

			.card_content_wrap {
				margin-top: 30rpx;

				.card_content_left {
					margin-right: 20rpx;
				}

				.card_content_right {
					font-size: 26rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 30rpx;
				}
			}
		}
	}

	.total_ {
		.total_price {
			font-size: 40rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #EC1B1B;
			line-height: 56rpx;
		}
	}
</style>